<template>
  <div class="backColor">
    <!-- NavBar 导航栏 -->
    <van-nav-bar sticky
    title="商品详情"
    >
      <template #left>
        <van-icon name="arrow-left" size="18" @click="$router.go(-1)" />
      </template>
      <template #right>
        <van-icon size="18" name="search" @click="isShowMot = true" />
      </template>
    </van-nav-bar>

    <!-- 弹出模态框 -->
    <div>
      <van-overlay :show="isShowMot" @click="isShowMot = false">
        <div
          style="
            width: 100%;
            height: 100%;
            background-color: white;
            overflow: hidden;
            z-index: 6;
          "
        >
          <div style="width: 100%; height: 600px; margin-top: 50%">
            <p
              style="text-align: center; margin-top: 30px; margin-bottom: 20px"
            >
              分享给好友
            </p>
            <div>
              <van-grid :column-num="3">
                <van-grid-item icon="photo-o" text="微信好友" />
                <van-grid-item icon="photo-o" text="新浪微博" />
                <van-grid-item icon="photo-o" text="QQ好友" />
                <van-grid-item icon="photo-o" text="复制链接" />
                <van-grid-item icon="photo-o" text="生成专属二维码" />
              </van-grid>
            </div>
          </div>
        </div>
      </van-overlay>
    </div>

    <!-- Tab 标签页 -->
    <div>
      <van-tabs v-model="active" class="vanTabs" sticky>
        <div>
          <van-tab title="商品介绍">
            <div class="swipe_style">
              <!-- 商品介绍轮播图 -->
              <van-swipe
                class="my-swipe"
                :autoplay="3000"
                indicator-color="white"
              >
                <van-swipe-item>1</van-swipe-item>
                <van-swipe-item>2</van-swipe-item>
                <van-swipe-item>3</van-swipe-item>
                <van-swipe-item>4</van-swipe-item>
              </van-swipe>

              <!-- 商品名称价格  Cell 单元格 -->
              <van-cell
                inset
                title="金银花百花 山东"
                size="large"
                class="vanCell_bottom"
              />
              <van-cell
                inset
                title="匠心优选，颗粒饱满"
                label="￥199.00 ￥249"
                class="vanCell_bottom"
              />

              <!-- 商品参数 -->
              <van-cell
                is-link
                @click="showPopup"
                title="商品参数"
                value="查看"
                class="vanCell_bottom"
              />

              <van-popup
                v-model="show"
                position="bottom"
                :style="{ height: '30%' }"
              >
                <van-cell-group>
                  <van-cell title="起购价" value="100公斤" />
                  <van-cell title="产地" value="山东" />
                  <van-cell title="库存" value="200000 公斤" />
                  <van-cell title="规格/等级" value="白花选货" />
                  <van-cell title="包装规格" value="编织袋" />
                  <van-cell title="能否提供发票" value="提供" />
                  <van-cell title="发货地" value="山东" />
                  <van-cell title="发货仓库" value="山东贸易仓" />
                </van-cell-group>
              </van-popup>

              <!-- 商品介绍 -->
              <div class="intro">
                <div
                  style="
                    text-align: center;
                    font-size: 20px;
                    margin-bottom: 10px;
                  "
                >
                  <strong>商品介绍</strong>
                </div>
                <div style="color: gray; text-indent: 32px">
                  <p>产新年份：2020年11月</p>
                  <p>灰渣占比：小于3%</p>
                  <p>干度小于14%</p>
                  <p>加工方法：烘干</p>
                  <p>包装：编织袋内衬塑料袋或纸箱</p>
                </div>
              </div>

              <!-- 同类推荐 -->
              <div style="width: 100%; text-align: center">同类推荐</div>
              <div class="tuiJian">
                <div class="center">
                  <div class="apple1">
                    <div class="apple3"></div>
                  </div>
                  <div class="apple2">
                    <p>金银花 统货</p>
                    <p>匠心精选，颗颗饱满</p>
                    <p>￥99</p>
                  </div>
                </div>
                <div class="center">
                  <div class="apple1">
                    <div class="apple3"></div>
                  </div>
                  <div class="apple2">
                    <p>金银花 统货</p>
                    <p>匠心精选，颗颗饱满</p>
                    <p>￥99</p>
                  </div>
                </div>
                <div class="center">
                  <div class="apple1">
                    <div class="apple3"></div>
                  </div>
                  <div class="apple2">
                    <p>金银花 统货</p>
                    <p>匠心精选，颗颗饱满</p>
                    <p>￥99</p>
                  </div>
                </div>
                <div class="center">
                  <div class="apple1">
                    <div class="apple3"></div>
                  </div>
                  <div class="apple2">
                    <p>金银花 统货</p>
                    <p>匠心精选，颗颗饱满</p>
                    <p>￥99</p>
                  </div>
                </div>
                <div class="center">
                  <div class="apple1">
                    <div class="apple3"></div>
                  </div>
                  <div class="apple2">
                    <p>金银花 统货</p>
                    <p>匠心精选，颗颗饱满</p>
                    <p>￥99</p>
                  </div>
                </div>
                <div class="center">
                  <div class="apple1">
                    <div class="apple3"></div>
                  </div>
                  <div class="apple2">
                    <p>金银花 统货</p>
                    <p>匠心精选，颗颗饱满</p>
                    <p>￥99</p>
                  </div>
                </div>
              </div>

              <!-- 上拉查看图文详情 -->
            </div>
          </van-tab>
        </div>

        <van-tab title="图文详情">
          <div>
            <div class="pStyle">
              <p>这款运动内衣大身以红色山西印花拼黑色，引人注目。莱用具</p>
              <p>有超细网眼的机织尼氨面料，内衬冲孔透气填充胸垫，稳固胸</p>
              <p>型的同时更弹力透气。前胸的V字网眼搭配背部层叠设计，增强</p>
              <p>运动稳定性的同时，也帮助运动中的身体透气排汗，令性感的</p>
              <p>运动美展现无疑</p>
            </div>

            <div class="demo1">
              <div class="demo2"></div>
            </div>
            <div class="demo1">
              <div class="demo2"></div>
            </div>

            <!-- 注意事项 -->
            <div class="importThings">
              <div style="text-align: center">注意事项</div>
              <br />
              <div class="pLineH">
                <div>
                  <div class="titleStyle">• 购买运费如何收取？</div>
                  <p>单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取</p>
                  <p>10元运费。（港澳台地区需满500元免邮费；不满500元，每单</p>
                  <p>收取30元运费)</p>
                </div>
                <br />
                <br />
                <div>
                  <div class="titleStyle">• 使用什么快递发货?</div>
                  <p>默认使用顺丰快递发货(个别商品使用其他快递）</p>
                  <p>配送范围覆盖全国大部分地区(港澳台地区除外）。</p>
                </div>
                <br />
                <br />
                <div>
                  <div class="titleStyle">• 如何申请退货?</div>
                  <p>1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原</p>
                  <p>路返还，不同的银行处理时间不同，预计1-5个工作日到账；</p>
                  <p>2.内裤和食品等特殊商品无质量问题不支持退货；</p>
                  <p>3.退货流程：</p>
                  <p>确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验</p>
                  <p>货-退款审核-退款完成；</p>
                  <p>
                    4.因以岭中药产生的退货，如质量问题，退货邮费由以岭中药承
                  </p>
                  <p>担，退款完成后会以现金券的形式报销。因客户个人原因产生</p>
                  <p>的退货，购买和寄回运费由客户个人承担。</p>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="交易记录">
          <div class="jiLu">
            <div>
              <div>
                <table class="tableStyle" cellspacing="0" border>
                  <tbody>
                    <tr>
                      <td>fang***da</td>
                      <td>1000</td>
                      <td>2023-03-02</td>
                    </tr>
                    <tr>
                      <td>fang***da</td>
                      <td>1000</td>
                      <td>2023-03-02</td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <!-- 加载更多 -->
              <div class="more">
                <van-loading color="#0094ff" />
                <div style="width: 100%; margin: auto">正在加载更多</div>
              </div>
            </div>
          </div>
        </van-tab>

        <van-tab title="商户信息">
          <div>
            <div class="demo3">
              <div class="demo2"></div>
            </div>

            <div>
              <!-- cell单元格 -->
              <van-cell-group>
                <van-cell
                  title="以岭中药材"
                  label="商户简介"
                  style="color: red"
                />
              </van-cell-group>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 下单 -->
    <div class="xiaDan">
      <van-submit-bar class="btnStyle" button-text="提交订单" @submit="ShowBtn">
        <div v-show="isShowBtns" class="btnsStyle">
          <button @click="todingdan">已登录</button>
          <button @click="tologin">未登录</button>
        </div>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
export default {
  name: "WorkspaceJsonAboutView",

  data() {
    return {
      active: 0,
      show: false,
      show2: false,
      isShowMot: false,
      isShowBtns: false,
    };
  },

  mounted() {},

  methods: {
    dengORnodeng() {},
    showPopup() {
      this.show = true;
    },
    ShowBtn() {
      this.isShowBtns = true;
    },
    tologin(){
      this.$router.push('/login')
      this.isShowBtns = false;
    },
    todingdan(){
      this.$router.push('/home')
      this.isShowBtns = false;
    }

  },
};
</script>

<style lang="less" scoped>
.more {
  bottom: 0;
  margin: 700px auto;
  text-align: center;
}
.btnsStyle {
  position: relative;
  left: 50px;
  z-index: 7;
}
.center {
  height: 240px;
  background-color: white;
}
.tuiJian {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 20px;
  display: flex;
  overflow: scroll;
}
.tuiJian::-webkit-scrollbar {
  display: none;
}
.apple1 {
  width: 100px;
  height: 100px;
  background-color: #e4e4e4;
  margin: 0 34px;
  margin-top: 30px;
  position: relative;
}
.apple2 {
  text-align: center;
}
.apple2 p {
  margin-top: 10px;
}
.apple2 > p:nth-child(2) {
  font-size: 14px;
  color: #dbd0cf;
}
.apple2 > p:nth-child(3) {
  font-size: 14px;
  color: red;
}
.apple3 {
  width: 20px;
  height: 30px;
  border: 5px solid white;
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.vanGird {
  width: 120%;
}
// .backColor {
//   background-color: #f9f9f9;
// }
.van-nav-bar .van-icon {
  color: #00c298af;
}
title-active-color {
  color: #00c298af;
}
.vantabs {
  position: sticky;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 250px;
  text-align: center;
  background-color: #e4e4e4;
}
.vanCell_bottom {
  margin-bottom: 16px;
}
.intro {
  width: 100%;
  height: 200px;
  background-color: white;
  line-height: 30px;
  margin-bottom: 16px;
}
.pStyle {
  font-size: 6px;
  box-sizing: border-box;
  color: gray;
  line-height: 28px;
  //   text-indent: 14px;
  padding: 10px;
  white-space: nowrap;
}
.demo1 {
  width: 90%;
  height: 200px;
  margin: 10px auto;
  background-color: #e4e4e4;
  position: relative;
  margin-bottom: 10px;
}
.demo2 {
  width: 34px;
  height: 54px;
  border: 8px solid white;
  background-color: #e4e4e4;
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.importThings {
  height: 90vh;
  text-indent: 9px;
  font-size: 12px;
}
.pLineH p {
  font-size: 13px;
  line-height: 30px;
  color: gray;
}
.titleStyle {
  font-size: 16px;
  color: #777475;
  font-weight: bold;
}
.tableStyle {
  border: 1px solid black;
  margin: 10px auto;
  //   border-collapse: collapse;
  width: 90%;
  text-align: center;
}
.demo3 {
  width: 90%;
  height: 140px;
  margin: 10px auto;
  background-color: #e4e4e4;
  position: relative;
  margin-bottom: 10px;
}
.jiLu {
  height: 800px;
}
.van-overlay {
  background-color: rgb(137 136 136 / 70%);
}
.van-cell__value {
  text-align: left;
}
</style>